<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "0px"
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3"],
      // color:['#CC0000','#0066CC','#00CCCC','#990066','#ea9914','#e7600e','#006633','#ADCB13','#0099FF','#FFCC33','#D39188','#5c2a69','#5DB85E','#C40082','#FF3703','#D5353F','#B699BD','#a02024','#dd6a24','#cc3736'],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        // title: {
        // text: "个",
        // left: 20,
        //   textStyle: {
        //     color: "#999",
        //     fontSize: "12"
        //   }
        // },
        tooltip: {
          trigger: "axis",
          formatter(p) {
            var y_name = p[0].name
            p.forEach((item, index) => {
              if (index === that.origin.length) {
                return
              }
              y_name += `<p>${item.marker}${item.seriesName}：${
                item.value === undefined ? "-" : item.value
                } kWh</p>`
            })
            return y_name
          }
        },
        // axisPointer: {
        //   show: true,
        //   lineStyle: {
        //     type: "dashed",
        //     color: "#000"
        //   },
        //   label: {
        //     show: true,
        //     color: "#fff",
        //     backgroundColor: "rgba(0, 0, 0, 1)"
        //   }
        // },
        grid: {
          left: 60,
          right: 30,
          bottom: 80
        },
        legend: {
          // itemWidth: 20,
          // itemHeight: 10,
          // right: 0,
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "尖", icon: 'circle', textStyle: { color: that.color } },
            { name: "峰", icon: 'circle', textStyle: { color: that.color } },
            { name: "平", icon: 'circle', textStyle: { color: that.color } },
            { name: "谷", icon: 'circle', textStyle: { color: that.color } }
          ]
        },
        dataZoom: [
          // 滑动条型数据区域缩放组件
          {
            show: true,
            type: "slider",
            // 滚动条高度
            height: 40,
            // 滚动条近距离底部距离
            bottom: 0,
            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。默认0
            start: 50,
            // 数据窗口范围的结束百分比。范围是：0 ~ 100。默认100
            end: 100,
            // 手柄的样式配置
            handleStyle: {
              // 手柄颜色 默认#a7b7cc
              color: false
            },
            // 文字样式
            textStyle: {
              //  文字的颜色 默认#333
              color: false
            }
          },
          // 内置型数据区域缩放组件
          {
            type: "inside"
          }
        ],
        xAxis: [
          {
            // 是否显示
            show: true,
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴类型
            type: "category",
            // 坐标轴轴线相关设置
            axisLine: {
              // 坐标轴样式
              lineStyle: {
                // 坐标轴颜色
                // color: "#000000"
              }
            },
            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            },

            // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            // boundaryGap: false,
            // 坐标轴刻度标签的相关设置
            axisLabel: {
              // 坐标轴刻度颜色
              // color: "#000000"
            },
            data: that.origin.map((item, index) => {
              return item.name
            })
          }
        ],
        yAxis: [
          {
            // 坐标轴名称。
            name: 'kWh',
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [0, 30, 28, 0]
            },
            // 坐标轴类型
            type: "value",
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴在 grid 区域中的分隔线
            splitLine: {
              // 是否显示
              show: false,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              }
            },
            // 坐标轴轴线相关设置。
            axisLine: {
              // 是否显示
              // show: true,
              lineStyle: {
                // 坐标轴线线的颜色。
                // color: "#000000"
                // 坐标轴线线的宽度
                // width: 1
                width: 0
              }
            },

            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            }
          }
        ],
        // yAxis: [
        //   {
        //     name: "kWh",
        //     nameTextStyle: {
        //       padding: [0, 30, 30, 0]
        //     },
        //     type: "value",
        //     splitLine: {
        //       show: true,
        //       lineStyle: {
        //         color: "#e5e5e5",
        //         type: "dotted"
        //       }
        //     },
        //     axisLine: {
        //       lineStyle: {
        //         color: "#999",
        //         width: 0
        //       }
        //     },
        //     axisTick: {
        //       show: false
        //     }
        //   }
        // ],
        series: [
          {
            name: "尖",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            // itemStyle: {
            //   color: "#FF5227"
            // },
            data: that.origin ? that.origin.map((item, i) => {
              return item.electricMeterReadingResp.tipQuantity
            }) : null
          },

          {
            name: "峰",
            type: "bar",
            stack: "total",
            // itemStyle: {
            //   color: "#FF9200"
            // },
            data: that.origin ? that.origin.map((item, i) => {
              return item.electricMeterReadingResp.peakQuantity
            }) : null
          },
          {
            name: "平",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            // itemStyle: {
            //   color: "#0780ED"
            // },
            data: that.origin ? that.origin.map((item, i) => {
              return item.electricMeterReadingResp.flatQuantity
            }) : null
          },
          {
            name: "谷",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            // itemStyle: {
            //   color: "#00AFC3"
            // },
            data: that.origin ? that.origin.map((item, i) => {
              return item.electricMeterReadingResp.valleyQuantity
            }) : null
          }
        ]
      }
      return opt
    }
  },
  watch: {
    width() { },
    origin() {
      // this.initChart()
      // console.log(this.opt)
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
      window.addEventListener("resize", () => {
        this.chart.resize()
      })
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length; i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
